<!-- 个人设置 -->
<template>
  <div class="personalBox">
    <div class="tab_box">
      <div
        class="tab_item"
        v-for="tab in tab_list"
        :key="tab.id"
        :class="{ active: tab.id === currentId }"
        @click="handleTabChange(tab)"
      >
        {{ tab.name }}
      </div>
    </div>
    <div class="right_content">
      <component :is="currentComponent"></component>
    </div>
  </div>
</template>

<script>
import accoutSettings from "../content/accoutSettings.vue"
import version from "../content/version.vue"
export default {
  name: "personalPage",
  components: {
    accoutSettings,
    version
  },
  data() {
    return {
      currentComponent: accoutSettings,
      currentId: 1,
      tab_list: [
        {
          id: 1,
          name: "账号设置",
          component: accoutSettings
        },
        {
          id: 2,
          name: "关于版本",
          component: version
        }
      ]
    }
  },

  methods: {
    handleTabChange(tab) {
      this.currentComponent = tab.component
      this.currentId = tab.id
    }
  }
}
</script>
<style lang="less" scoped>
.personalBox {
  display: flex;
  width: 120px;
  height: 100%;
  background: #f7f8fa;
  .tab_box {
    display: flex;
    flex-direction: column;
    padding: 48px 21px 20px 35px;
    .tab_item {
      padding-bottom: 20px;
      cursor: pointer;
    }
    .active {
      color: rgb(var(--color-primary));
      font-weight: 600;
    }
    border-right: 1px solid #c7cdd9;
  }
  .right_content {
    flex: 1;
  }
}
</style>
